import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'

export default class App extends Component {
  
  //初始化状态
  state={
    todos:[
      {id:'1',name:'吃饭',done:true},
      {id:'2',name:'睡觉',done:true},
      {id:'3',name:'打代码',done:false},
      {id:'4',name:'逛街',done:true},
    ]
  }
  
  //addTodo用于添加一个todo，接收的参数是todo对象
  addTodo=(todoObj)=>{
    //获取原todos
    const {todos} =this.state
    //追加yigetodo
    const newTodos=[todoObj,...todos]
    //更新状态
    this.setState({
      todos:newTodos
    })
  }

  //updateTodo用于更新yigetodo对象
  updateTodo=(id,done)=>{
    //获取状态的todos
    const {todos}=this.state
    //匹配处理数据
    const newTodos=todos.map((todoObj=>{
      if(todoObj.id===id) return {...todoObj,done}
      else return todoObj
    }))
    this.setState({
      todos:newTodos
    })
  }

  //deleteTodo用于删除yigetodo对象
  deleteTodo=(id)=>{
    //获取原来的todos
    const {todos}=this.state
    //删除指定id的todo对象
    const newTodos=todos.filter((todoObj)=>{
      return todoObj.id!==id
    })
    //更新状态
    this.setState({
      todos:newTodos
    })
  }

  //checkAllTodo用于全选
  checkAllTodo=(done)=>{
    //获取原来的todos
    const {todos}=this.state
    //加工数据
    const newTodos=todos.map((todoObj)=>{
      return {...todoObj,done}
    })
    //更新状态
    this.setState({
      todos:newTodos
    })
  }

  //clearDoneTodo用于清除已完成任务
  clearDoneTodo=()=>{
    //获取原来的todos
    const {todos}=this.state
    //过滤数据
    const newTodos=todos.filter((todoObj)=>{
      return todoObj.done!==true
    })
    //更新状态
    this.setState({
      todos:newTodos
    })
  }
  render() {
    const {todos}=this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} todos={todos}/>
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearDoneTodo={this.clearDoneTodo}/>
        </div>
      </div>
    )
  }
}
